<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="UTF-8">
		<title>明道致远</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="chajian/mui/css/mui.css" rel="stylesheet" />
		<link href="chajian/mui/css/mui.picker.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/common.css" />
		<script type="text/javascript" src='chajian/jquery/jquery-1.11.3.min.js'></script>
		<script type="text/javascript" src="chajian/flexibel/flexible.js"></script>
		<script type="text/javascript" src="chajian/flexibel/flexible_css.js"></script>
		<style>
			.mui-table-view {
				background: #f9f9f9;
			}
			
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group {
				margin-top: 10px;
			}
			
			.mui-input-group label {
				width: 27%;
				line-height: 18px;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 73%;
			}
			
			.mui-input-row label {
				text-align: right;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.spliter {
				color: #bbb;
				padding: 0px 8px;
			}
			
			.verification-code {
				position: absolute;
				right: 35px;
				top: 9px;
				font-size: 0.4rem;
				color: #868686;
				height: 21px;
			}
			
			.pd-right {
				padding-right: 100px !important;
			}
			
			.mui-input-group:after {
				background: transparent;
			}
			
			.verification-code img {
				width: 0.4rem;
				vertical-align: middle;
			}
			
			.mui-table-view .mui-media-object {
				max-width: 100px;
				height: 100px;
			}
			
			.mui-table-view:after {
				background-color: transparent;
			}
			
			.overflow-dot {
				color: #333;
				font-size: 0.34rem;
			}
			
			.select-buy {
				padding: 11px 15px;
			}
			
			.select-buy li {
				background: #f6e9d5;
				line-height: 40px;
				border-radius: 4px;
				padding: 0 0.6rem;
				color: #eb9617;
				font-size: 0.4rem;
				margin-bottom: 0.4rem;
			}
			
			.select-buy li.current {
				background: #f1a90e;
				color: #fff;
			}
			
			.select-buy li .lf {
				width: 60%;
			}
			
			.select-buy li .rt {
				width: 40%;
			}
		</style>

	</head>

	<body>
		<script src="chajian/mui/js/mui.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<div class="mui-content">
		<!--	<form class="mui-input-group">
				<div class="mui-input-row">
					<label>
						收货人:
					</label>
					<input type="text" class="mui-input-clear mui-input pd-right" placeholder="">
					<a class="verification-code" href="#">
						<img src="images/alter.png" alt="" /> 修改
					</a>
				</div>
				<div class="mui-input-row">
					<label>
						地址:
					</label>
					<input type="password" class="mui-input-clear mui-input" placeholder="山西省-太原市-小店区" disabled="disabled">
				</div>
			</form>-->
			<div class="color-bar"></div>
			<!--<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;" class="">
						<img class="mui-media-object mui-pull-left" src="images/md_gzhtjtu.png">
						<div class="mui-media-body">
							<p style="color: #333;font-size: 0.46rem;">右脑照相识字课</p>
							<p style="margin-top: 0.4rem;" class="overflow-dot mui-ellipsis">最大限度的发挥出他们的想象力、创造力、记忆力、专注力、思维力等多方面的能力。</p>
							<p style="margin-top: 0.4rem;">
								<span class="orange-price" style="font-size: 0.6rem;">19.9&sim;105.6</span>
								<span style="font-size: 0.3rem;">共15课时</span>
							</p>
						</div>
					</a>
				</li>
			</ul>
			<ul class="select-buy">
				<li class="current" onclick="SelectCurrent(this)">
					<div class="lf">2人团(15课时)</div>
					<div class="rt">￥198</div>
					<div class="clear"></div>
				</li>
				<li onclick="SelectCurrent(this)">
					<div class="lf">2人团(15课时)</div>
					<div class="rt">￥198</div>
					<div class="clear"></div>
				</li>
				<li onclick="SelectCurrent(this)">
					<div class="lf">2人团(15课时)</div>
					<div class="rt">￥198</div>
					<div class="clear"></div>
				</li>
			</ul>-->
			<div class="my-card-over">
				<div class="my-card-media" style="height: 5rem;">
					<img src="images/md_gzhketuxqs.png" alt="" />
				</div>
				<div class="ab-footer">
					<div class="bg-white">
						<div>26课时</div>
						<div class="bar"></div>
						<div>4-8岁</div>
						<div class="bar"></div>
						<div>情景教学</div>
					</div>
				</div>
			</div>
			<div class="my-cells margintwo" style="margin-top: 1.1rem;">
				<div class="my-cell">
					<div class="my-cell__bd">商品总额:</div>
					<div class="my-cell__ft" style="color: #ff8400;">￥138</div>
				</div>
				<div class="my-cell">
					<div class="my-cell__bd">救援识别码:</div>
					<div class="my-cell__ft right-mark" style="color: #ff8400;">-￥20</div>
				</div>
			</div>
			<form class="mui-input-group input-group-bar">
				<div class="mui-input-row">
					<label style="text-align: left;">
						留言:
					</label>
					<input type="text" class="mui-input-clear mui-input" placeholder="给卖家留言">
				</div>
			</form>
		</div>
		<div class="footer-bar-tab">
			<div class="lf max-left">
				实际付款:<span>￥19.6</span>
			</div>
			<div class="rt min-right">
				<a href="#">
					立即支付
				</a>
			</div>
			<div class="clear"></div>
		</div>
		<script type="text/javascript">
			/*$(".select-buy li").click(function() {
				$(this).addClass("current").siblings().removeClass("current");
			})*/
			function SelectCurrent(obj){
				$(obj).addClass("current").siblings().removeClass("current");
			}
		</script>
	</body>

</html>